<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <title>GoGoCode Vue3 Playground</title>
    <style>
      body {
        width: 100vw;
        height: 100vh;
      }
      .compare {
        display: flex;
        justify-content: space-around;
        align-items: top;
      }
      .mt10 {
        margin-top: 10px;
      }
      .mt20 {
        margin-top: 20px;
      }
      .mb10 {
        margin-bottom: 10px;
      }
      .mb20 {
        margin-bottom: 20px;
      }
      .tc {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="main-app">
      <h2 class="tc mt20 mb10">
        GoGoCode Vue3 Playground
      </h2>
      <div class="mt20 mb20 tc">
        <select v-model="selected" v-on:change="changeRoute">
          <option v-for="option in CompsConfig" v-bind:value="option.link">
            {{ option.text }}
          </option>
        </select>
        <div class="mt10" v-if="selected !== '/'">
          <a
            :href="'https://v3.cn.vuejs.org/guide/migration'+selected"
            target="_blank"
            rel="noopener noreferrer"
            >Vue Miragtion：{{selected}}</a
          >
        </div>
      </div>
    </div>
    <div class="compare">
      <div id="vue2">Vue2 loading...</div>
      <div id="vue3">Vue3 loading...</div>
    </div>
  </body>
</html>
